<!DOCTYPE html>
<html lang="en" style="height:100%;background-color:#ffffff">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>券</title>

    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>

</head>
<body style="height:100%;background-color:#ffffff">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">券</span>
</div>
<div id="app" class="container"  style="padding-top:60px;" v-cloak>
  <div style="padding:5px">
  <div class="coin_proper" style="background:#EDE4FF">
    <div class="coin-title"><img v-src="'../../image/3_quan1.png'"><span>当前券</span></div>
    <div class="coin-count">{{detail.voucher}}</div>
    <div class="button" v-open-win vurl="../game/exchange" v-row-active.tapmode>获取更多</div>
  </div>
</div>
<div class="coin-source">
  <div class="menu-top-tap">
    <div class="tap-item" :class="{tap_active:state == 1}" v-myclick="[1, changestate]" >获得</div>
    <div class="tap-item" :class="{tap_active:state == 2}" v-myclick="[2, changestate]">使用</div>
  </div>
  <div class="source_detail">
    <div class="source_detail_line" v-for="(item, index) in lists">
    <span>{{item.date_add|date2}}</span>
    <span>{{item.type}}</span>
    <span style="float:right">{{state==1?'+':'-'}}{{item.voucher}}</span>
  </div>
  <div  v-show="detail.list.length<1" style="text-align:center;margin-top:50px">
    <img v-src="'../../image/empty.png'" style="margin:0 auto;width:30%">
    <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">您还没有{{state==1?'获得':'使用'}}记录</div>
  </div>
  </div>
</div>
<limit-load v-show="lists.length>0" style="margin:10px 0;"
      count-per-page="15"
      :arr="lists" :url="url"
      ret-attr="list"
      >
</limit-load>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>

<script>
    var commission;
    var vm;
    var user;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        var data = {
            member_id: getPrefs('member_id'),
            limit_id: 0,
        };
        var callback = function (ret) {
            detail = ret.content;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.gainVoucherDetail, data, callback);
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
              state:1,
              detail:detail,
              url: URL.gainVoucherDetail,
              lists:detail.list,

            },
            computed: {
            },
            methods: {
              changestate:function(state){
                this.state = state;
                if(state==1){
                  var data = {
                      member_id: getPrefs('member_id'),
                      limit_id: 0,
                  };
                  var callback = function (ret) {
                      detail = ret.content;
                      vm.detail = detail;
                      vm.lists = detail.list;
                      lists = detail.list;

                      vm.url = URL.gainVoucherDetail;
                  };
                  pinet.post(URL.gainVoucherDetail, data, callback);
                }
                if(state==2){
                  var data = {
                      member_id: getPrefs('member_id'),
                      limit_id: 0,
                  };
                  var callback = function (ret) {
                      detail = ret.content;
                      vm.detail = detail;
                      vm.lists = detail.list;
                      lists = detail.list;

                      vm.url = URL.useVoucherDetail;
                  };
                  pinet.post(URL.useVoucherDetail, data, callback);
                }
              }
            }
        })
    }

    function addListeners() {

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
        api.addEventListener({
            name: 'updateproperty'
        }, function (ret, err) {
          var data = {
              member_id: getPrefs('member_id'),
              limit_id: 0,
          };
          var callback = function (ret) {
              vm.detail = ret.content;
          };
          pinet.post(URL.gainVoucherDetail, data, callback);
        });
    }

</script>
</html>
